<template>
  <div class="editClasses">
    <!-- 修改班级对话框 -->
    <el-dialog title="修改班级" :visible.sync="dialog" width="42%">
      <el-form label-position="right" :model="editClassesData" :rules="rules" status-icon label-width="auto" ref="editClassesForm">
        <el-form-item label="班级的名称" prop="name">
          <el-input v-model="editClassesData.classesName" size="small" placeholder="请输入班级名称"></el-input>
        </el-form-item>
        <el-form-item label="班级允许的加入方式" prop="joinWay">
          <el-select v-model="editClassesData.joinWay" placeholder="请选择" size="small">
            <el-option v-for="item in joinWayType" :key="item.key" :label="item.value" :value="item.key" />
          </el-select>
		  
		  <el-upload
		          :show-file-list="false"
		          :before-upload="beforeUpload"
		          :on-success="onSuccess"
		          :on-error="onError"
		  		  :data="uploadData"
		          :disabled="importDisabled"
		          style="display: inline-flex;margin-right: 10px;"
		          action="http://localhost:8082/classes/importStudent">
		      <el-button  :disabled="importDisabled" type="success" :icon="importDataIcon">
		          {{importStudentText}}
		      </el-button>
		  </el-upload>
		  <el-button type="success" ><i class="el-icon-download"><a style="text-decoration: none;color: white" href="/static/doc/student导入模板.xlsx">导入模板下载</a></i></el-button>
		  
        </el-form-item>
        <el-form-item label="班级简介" prop="introduction">
          <el-input v-model="editClassesData.introduction" :autosize="{ minRows: 2, maxRows: 6 }" type="textarea" show-word-limit size="medium" maxlength="300" placeholder="请输入班级简介"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="editClasses('editClassesForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import axios from "@/utils/axiosutils.js"

export default {
  name: "EditClasses",
  
  computed: {
    ...mapState(["joinWayType"]),
  },
  data() {
    var checkName = (rule, value, callback) => {
      var reg = /^[\u4e00-\u9fa5\w]{1,16}$/;
      if (!reg.test(value)) {
        callback(new Error("班级名称只能是3-16位汉字、字母、数字、下划线"));
      } else {
        callback();
      }
    };
    return {
		importStudentText:"导入学生生成账号",
		// 导入按钮的图标
		importDataIcon: 'el-icon-upload2',
		// 导入按钮是否被禁用
		importDisabled: false,
      dialog: false,
	  uploadData:{
		  c_id:""
	  },
      //创建班级的数据
      editClassesData: {
        name: "",
        joinWay: "all",
        introduction: "",

      },
      rules: {
        name: [{ validator: checkName, trigger: "change" }],
      },
    };
  },
  methods: {
    //修改班级按钮
    editClasses(formName) {
      //修改班级信息
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialog = false;
          // 处理post请求参数
          var params = {
            classesId: this.editClassesData.classesId,
            introduction: this.editClassesData.introduction,
            joinWay: this.editClassesData.joinWay,
            classesName: this.editClassesData.classesName,
            createDate:this.editClassesData.createDate,
            creatorId:this.editClassesData.creatorId,
            peopleNum:this.editClassesData.peopleNum,
          };
          axios.post("classes/updateClasses",res=>{
            this.$message.success("修改班级信息成功");
            this.$emit('success')
          },params);
        }
      });
    },
	// 导入文件失败后回调
	onError() {
		this.closeFullScreen(this.openFullScreen());
		this.importDataText = '导入数据';
		this.importDataIcon = 'el-icon-upload2';
		this.importDisabled = false;
		
		this.$message.success("导入失败！");
	},
	// 导入文件成功后回调
	onSuccess(response) {
		if(response.code==500){
			this.$message.error(response.message)
		}else{
			// message 弹出消息
		this.$message.success("导入成功！");
		}
		
		this.closeFullScreen(this.openFullScreen());
		// 成功后文本修改为原来的导入数据
		this.importDataText = '导入数据';
		// 图标修改
		this.importDataIcon = 'el-icon-upload2';
		// 将上传组件改为允许使用
		this.importDisabled = false;
		// 调用刷新数据的方法
		
	},
	// 上传文件调用
	beforeUpload() {
		this.openFullScreen();
			this.uploadData.c_id=this.editClassesData.classesId;
		// 将文本修改为正在导入
		this.importDataText = '正在导入';
		// 修改其图标
		this.importDataIcon = 'el-icon-loading';
		// 将其上传组件暂时禁用
		this.importDisabled = true;
		
	},
	openFullScreen() {
	        const loading = this.$loading({
	          lock: true,
	          text: 'Loading',
	          spinner: 'el-icon-loading',
	          background: 'rgba(0, 0, 0, 0.7)'
	        });
	        return loading;
	      },
	
	closeFullScreen(loading){
	        loading.close();
	 },
	
  },
};
</script>

<style lang="less" scoped>
.el-dialog__body {
  text-align: left;
}
</style>